<template>
  <div>
    <h1>个人中心</h1>
    <h1>欢迎你 {{user.data.name}}同学</h1>
    <div>
      <el-row>
        <el-col :span="5">
          <h1>系统登录次数： {{user.data.loginTimes}}</h1>
        </el-col>
        <el-col :span="8">
          <h1>上次登录时间： {{user.data.lastLoginTime}}</h1>
        </el-col>
      </el-row>

    </div>


    <el-descriptions
        class="margin-top"
        title="通讯录信息"
        :column="3"
        :size="'default'"
        border
    >
      <template #extra>
        <el-button type="primary" @click="dialogVisible = true">更新信息</el-button>
        <el-button @click="logoff">退出登录</el-button>
      </template>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            姓名
          </div>
        </template>
        {{ user.data.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            专业
          </div>
        </template>
        {{ user.data.majority }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            班级序号
          </div>
        </template>
        {{ user.data.classNum }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            就业单位
          </div>
        </template>
        {{ user.data.employers }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            入学年份
          </div>
        </template>
        {{ user.data.entryYear }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            毕业年份
          </div>
        </template>
        {{ user.data.graduateYear }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            所在城市
          </div>
        </template>
        {{ user.data.city }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            联系方式
          </div>
        </template>
        {{ user.data.phone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            电子邮箱
          </div>
        </template>
        {{ user.data.email }}
      </el-descriptions-item>
    </el-descriptions>

  </div>

  <el-dialog
      v-model="dialogVisible"
      title="更新信息"
      width="600"
  >
    <el-form :model="form" label-width="auto" size="large" :rules="rules">
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" />
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>

      <el-form-item required>
        <el-col :span="11">
          <el-form-item  label="所读专业" prop="majority">
            <el-select
                v-model="form.majority"
                placeholder="点击下拉框选择"
                size="large"
            >
              <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="2" class="text-center" >
        </el-col>

        <el-col :span="11">
          <el-form-item  label="所在班级" prop="class_num">
            <el-input v-model.number="form.class_num" />
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item required>
        <el-col :span="11">
          <el-form-item label="入学年份" prop="entry_year">
            <el-input v-model.number="form.entry_year" />
          </el-form-item>
        </el-col>
        <el-col :span="2" class="text-center" >
        </el-col>
        <el-col :span="11">
          <el-form-item label="毕业年份" prop="graduate_year">
            <el-input v-model.number="form.graduate_year" />
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item required>
        <el-col :span="11">
          <el-form-item label="就业单位" prop="employers">
            <el-input v-model="form.employers" />
          </el-form-item>
        </el-col>
        <el-col :span="2" class="text-center" >
        </el-col>
        <el-col :span="11">
          <el-form-item label="所在城市" prop="city">
            <el-input v-model="form.city" />
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item required>
        <el-col :span="11">
          <el-form-item label="联系方式" prop="phone">
            <el-input v-model.number="form.phone" />
          </el-form-item>
        </el-col>
        <el-col :span="2" class="text-center" >
        </el-col>
        <el-col :span="11">
          <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="form.email"/>
          </el-form-item>
        </el-col>
      </el-form-item>
      <div class="register-btn">
        <el-button type="primary" @click="updateUserInfo">更新</el-button>
      </div>
    </el-form>
  </el-dialog>

</template>

<script setup lang="ts">
import {store} from "@/store";
import router from "@/router";
import {onMounted, reactive, ref} from "vue";
import {logoffUser, updateUser, userCenter} from "@/api/user.ts";
import {RegisterData, ReturnDataSingle} from "@/api/types/user.ts";
import {ElMessage, FormRules} from "element-plus";
import {getAllMajority} from "@/api/majority.ts";
import {Majority} from "@/api/types/majority.ts";

onMounted(() => {
  userCenter(store.state.id).then(data => {
    user.value = data
  })
  getAllMajority().then(data => {
    options.value = data.data
  })
})

const options = ref<Majority[]>([])

//对话框开启条件
const dialogVisible = ref(false)

const user = ref<ReturnDataSingle>({
  msg: '',
  code: 0,
  data: {
    id: '',
    password: '',
    name: '',
    majority: '',
    classNum: 0,
    entryYear: 0,
    graduateYear: 0,
    employers: '',
    city: '',
    phone: 0,
    email: '',
    lastLoginTime: '',
    loginTimes: '',
  },
})

const rules = reactive<FormRules<RegisterData>>({
  password: [
    { min: 6, max: 10, message: '密码长度为6到10', trigger: 'blur' },
  ],
  class_num: [
    {type: 'number', message: '请输入数字', trigger: 'blur' },
  ],
  entry_year: [
    {type: 'number', message: '请输入数字', trigger: 'blur' },
  ],
  graduate_year: [
    {type: 'number', message: '请输入数字', trigger: 'blur' },
  ],
  phone: [
    {pattern: /^\d{11}$/, message: '电话号码长度为11位', trigger: 'blur' },
    {type: 'number', message: '请输入数字', trigger: 'blur' },
  ],
})

const form = reactive<RegisterData>({
  id: '',
  password: '',
  name: '',
  majority: '',
  class_num: '',
  entry_year: '',
  graduate_year: '',
  employers: '',
  city: '',
  phone: '',
  email: ''
})

const updateUserInfo = () => {
  updateUser(form).then(data => {
    if (data.code == 200) {
      userCenter(store.state.id).then(data => {
        user.value = data
        dialogVisible.value = false
      })
      ElMessage(data.msg)
    } else {
      ElMessage(data.msg)
    }
  })
}

const logoff = () => {
  logoffUser().then(data => {
    if (data.code == 200) {
      router.push('/login')
      store.commit('cleanFromLocalStorage')
    } else {
      ElMessage(data.msg)
    }
  })

}
</script>

<style scoped>

</style>
